<template>
  <yd-layout class="m-footprint">
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="我的足迹" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
      <yd-icon name="delete" slot="right" size=".34rem" color="#666" @click.native="onDeleteAll"></yd-icon>
      <yd-icon name="home-outline" slot="right" size=".34rem" color="#666" @click.native="$router.push('/')"></yd-icon>
    </yd-navbar>

    <!-- tab -->
    <w-empty v-if="!footPrintList.length"></w-empty>
    
    <!-- <yd-infinitescroll :callback="loadList" ref="infiniteScrollHotspot" v-else> -->
      <!-- <div slot="list"> -->
        <yd-list theme="1" v-for="(footPrint, footListIndex) in footPrintList" :key="footListIndex" v-else>
          <p class="u-section-tit">{{footPrint.mobileDate}}</p>
          <yd-list-item v-for="(foot, footIndex) in footPrint.ftList" :key="footIndex">
            <img slot="img" v-lazy="foot.path">
            <span slot="title">{{foot.goodsName}}</span>
            <yd-list-other slot="other">
              <div>
                <span class="yd-price"><em>¥</em>{{foot.storePrice}}</span>
              </div>
              <div>月销{{foot.goodsSalenum}}件</div>
            </yd-list-other>
            <yd-list-other slot="other">
              <div>
                <yd-icon name="shopcart-outline" size=".3rem"></yd-icon>
              </div>
              <div @click.stop="onToSearch(foot.goodsName)">找相似 》</div>
            </yd-list-other>
          </yd-list-item>
        </yd-list>
      <!-- </div> -->
      <!-- 数据全部加载完毕显示 -->
      <!-- <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span> -->
      <!-- 加载中提示，不指定，将显示默认加载中图标 -->
      <!-- <p slot="loadingTip">加载中...</p> -->
    <!-- </yd-infinitescroll> -->
  </yd-layout>
</template>

<script>
  import { apiFootPrintList, apiDelFootPrint } from 'js/api'
  import { mapGetters } from 'vuex'

  export default {
    data() {
      return {
        footPrintList: [],
        curPage: 1,
        totalPage: 0
      }
    },
    created() {
      apiFootPrintList(this.token, this.curPage).then(data => {
        this.curPage = data.currentPage
        this.totalPage = data.totalPageCount
        this.footPrintList = data.footPointList
      })
    },
    methods: {
      // 清空数据
      onDeleteAll() {
        const _this = this
        const delArr = []
        this.footPrintList.forEach(footprint => {
          const arr = footprint.ftList.length ? footprint.ftList : []
          arr.forEach(foot => {
            delArr.push(foot.id)
          })
        })
        if (delArr.length) {
          this.$dialog.confirm({
            title: '提示',
            mes: '是否清楚足迹',
            opts: () => {
              apiDelFootPrint(_this.token, delArr).then(data => {
                _this.$toast('成功清除', () => {
                  _this.footPrintList = []
                })
              })
            }
          })
        } else {
          this.$toast('当前无数据')
        }
      },
      // 找相似
      onToSearch(keywords) {

      },
      // 加载更多数据
      loadList() {
        
      }
    },
    computed: {
      ...mapGetters(['token'])
    }
  }
</script>

<style lang="scss">
  .m-footprint {
    .yd-icon-delete, .yd-icon-home-outline {
      padding: .2rem;
    }
  }
</style>